<template>
  <div class="container">
    <div class="nav-login">
      <div class="middle">
        <p>婚庆平台主持人欢迎您！ 客服：13601371065（卓越老师）</p>
        <p class="p-login">
          <span v-if="isLogin"
            ><a href="http://localhost:8080/#/login">登录</a>"|"
            <a href="http://localhost:8080/#/register">注册</a>
          </span>
          <span v-if="isCenter" class="userCenter"
            ><span style="color: black" @click="centerHandle">个人中心</span>
            <span class="user">{{ username }}</span>
          </span>
        </p>
        <p></p>
      </div>
      <div class="nav-logo">
        <div class="middle">
          <a href="#">
            <img src="../../assets/image/logo.png" alt="婚庆logo" />
          </a>
          <div class="nav-label">
            <ul class="nav-ul">
              <li :class="{ active: isActive === 1 }" @click="changeClass(1)">
                <a href="/">首页</a>
              </li>
              <li :class="{ active: isActive === 2 }" @click="changeClass(2)">
                <a href="#/host">主持人</a>
              </li>
              <li :class="{ active: isActive === 3 }" @click="changeClass(3)">
                <a href="#/joinus">加入我们</a>
              </li>
              <li :class="{ active: isActive === 4 }" @click="changeClass(4)">
                <a href="#/about">关于我们</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from "../../api";
export default {
  name: "TopNav",
  data() {
    return {
      isActive: 1,
      username: "",
      isLogin: true,
      isCenter: false,
    };
  },
  methods: {
    changeClass(i) {
      this.isActive = i;
    },
    centerHandle() {
      api
        .getSearchHost({
          search: this.username,
        })
        .then((res) => {
          console.log(res.data[0]);
          if (res.data) {
            this.$router.push({
              path: "/center",
            });
          } else {
            api
              .getSearchNewPeople({
                search: this.username,
              })
              .then((res) => {
                console.log(res.data[0]);
                if (res.data) {
                  this.$router.push({
                    path: "/newpeoplecenter",
                  });
                } else {
                  api
                    .getSearchWedding({
                      search: this.username,
                    })
                    .then((res) => {
                      console.log(res.data[0]);
                      if (res.data) {
                        this.$router.push({
                          path: "/plannercenter",
                        });
                      } else {
                        api
                          .getSearchPlanner({
                            search: this.username,
                          })
                          .then((res) => {
                            console.log(res.data[0]);
                            if (res.data) {
                              this.$router.push({
                                path: "/companycenter",
                              });
                            }
                          });
                      }
                    });
                }
              });
          }
        });
    },
  },
  mounted() {
    if (localStorage.getItem("weddingIndex") != null) {
      this.isLogin = false;
      this.isCenter = true;
    }
    this.username = localStorage.getItem("weddingIndex");
  },
};
</script>

<style scoped>
.container {
  margin: 0 auto 31px 0;
}
.nav-login {
  background-color: #c4b4a8;
  height: 70px;
  width: 100%;
  margin: 0 auto;
}
.nav-login p {
  color: #666666;
  text-align: left;
}
.middle {
  width: 1000px;
  margin: 0 auto;
}
.p-login {
  float: right;
}
.nav-logo {
  margin: 0 auto;
  background-color: #c4b4a8;
  width: 100%;
  height: 80px;
}
.userCenter {
  width: 200px;
  height: 50px;
}
.user {
  width: 100px;
  padding: 10px;
  border-radius: 50px;
  background-color: #c4a4b8;
}
.nav-logo img {
  float: left;
  height: 80px;
}
.nav-label {
  height: 80px;
  margin-left: 245px;
  overflow: hidden;
  text-align: left;
}
.nav-ul {
  margin-top: 25px;
}
.nav-label li {
  padding: 0 20px;
  float: left;
  font-size: 18px;
  height: 36px;
  line-height: 36px;
  width: 80px;
  margin: 0 20px;
  text-align: center;
  color: #fff;
  width: 120px;
  text-align: center;
  box-sizing: border-box;
  border-radius: 10px;
}
/* .nav-label li:hover{
  border: 2px solid #fff;
    border-radius: 10px;
    color: #fff;
    box-sizing: border-box;
    height: 36px;
} */
/* .nav-label li.active {
  border-radius: 10px;
  color: #fff;
  line-height: 31px;
  border: 2px solid #fff;
} */

.active {
  border-radius: 10px;
  color: #fff;
  line-height: 31px;
  border: 2px solid #fff;
}
a {
  text-decoration: none;
  color: black;
}
</style>